<template>
  <el-dialog :visible.sync="detailDialogVisible" width="70%" center>
    <el-collapse v-model="detailExpandItems" @change="collapseChange">
      <el-collapse-item name="1" title="基础信息">
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-card style="height: 350px;" shadow="never">
              <div slot="header">
                <span>取货地</span>
              </div>
              <el-row :gutter="gutter">
                <el-col :span="12">
                  地址类型:&nbsp;&nbsp;{{ formData.shipperAddress.typeName }}
                </el-col>
                <el-col :span="12">
                  增值服务:&nbsp;&nbsp;{{ formData.shipperAddress.additionalServiceName }}
                </el-col>
              </el-row>
              <el-row :gutter="gutter">
                <el-col :span="12">
                  取货码:&nbsp;&nbsp;{{ formData.shipperAddress.code }}
                </el-col>
                <el-col :span="12">
                  客户订单号:&nbsp;&nbsp;{{ formData.customerRef }}
                </el-col>
              </el-row>
              <el-row :gutter="gutter">
                <el-col :span="8">
                  联系人:&nbsp;&nbsp;{{ formData.shipperAddress.contacter }}
                </el-col>
                <el-col :span="8">
                  联系电话:&nbsp;&nbsp;{{ formData.shipperAddress.phone }}
                </el-col>
                <el-col :span="8">
                  联系邮箱:&nbsp;&nbsp;{{ formData.shipperAddress.email }}
                </el-col>
              </el-row>
              <el-row :gutter="gutter">
                <el-col :span="8">
                  国家:&nbsp;&nbsp;{{ formData.shipperAddress.countryCode }}
                </el-col>
                <el-col :span="8">
                  州/省:&nbsp;&nbsp;{{ formData.shipperAddress.state }}
                </el-col>
                <el-col :span="8">
                  城市:&nbsp;&nbsp;{{ formData.shipperAddress.city }}
                </el-col>
              </el-row>
              <el-row :gutter="gutter">
                <el-col :span="8">
                  地址1:&nbsp;&nbsp;{{ formData.shipperAddress.address }}
                </el-col>
                <el-col :span="8">
                  地址2:&nbsp;&nbsp;{{ formData.shipperAddress.address2 }}
                </el-col>
                <el-col :span="8">
                  邮编:&nbsp;&nbsp;{{ formData.shipperAddress.zipCode }}
                </el-col>
              </el-row>
              <el-row :gutter="gutter">
                <el-col :span="8">
                  取货日期:&nbsp;&nbsp;{{ formData.shipperAddress.at }}
                </el-col>
                <el-col :span="8">
                  起始时间:&nbsp;&nbsp;{{ formData.shipperAddress.startTime }}
                </el-col>
                <el-col :span="8">
                  结束时间:&nbsp;&nbsp;{{ formData.shipperAddress.endTime }}
                </el-col>
              </el-row>
              <el-row :gutter="gutter">
                <el-col :span="24">
                  备注:&nbsp;&nbsp;{{ formData.shipperAddress.remark }}
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="height: 350px;" shadow="never">
              <div slot="header">
                <span>收货地</span>
              </div>
              <div>
                <el-form label-position="top" :model="formData.shipperAddress" size="small">
                  <el-row :gutter="gutter">
                    <el-col :span="12">
                      地址类型:&nbsp;&nbsp;{{ formData.consigneeAddress.typeName }}
                    </el-col>
                    <el-col :span="12">
                      增值服务:&nbsp;&nbsp;{{ formData.consigneeAddress.additionalServiceName }}
                    </el-col>
                  </el-row>
                  <el-row :gutter="gutter">
                    <el-col :span="8">
                      联系人:&nbsp;&nbsp;{{ formData.consigneeAddress.contacter }}
                    </el-col>
                    <el-col :span="8">
                      联系电话:&nbsp;&nbsp;{{ formData.consigneeAddress.phone }}
                    </el-col>
                    <el-col :span="8">
                      联系邮箱:&nbsp;&nbsp;{{ formData.consigneeAddress.email }}
                    </el-col>
                  </el-row>
                  <el-row :gutter="gutter">
                    <el-col :span="8">
                      国家:&nbsp;&nbsp;{{ formData.consigneeAddress.countryCode }}
                    </el-col>
                    <el-col :span="8">
                      州/省:&nbsp;&nbsp;{{ formData.consigneeAddress.state }}
                    </el-col>
                    <el-col :span="8">
                      城市:&nbsp;&nbsp;{{ formData.consigneeAddress.city }}
                    </el-col>
                  </el-row>
                  <el-row :gutter="gutter">
                    <el-col :span="8">
                      地址1:&nbsp;&nbsp;{{ formData.consigneeAddress.address }}
                    </el-col>
                    <el-col :span="8">
                      地址2:&nbsp;&nbsp;{{ formData.consigneeAddress.address2 }}
                    </el-col>
                    <el-col :span="8">
                      邮编:&nbsp;&nbsp;{{ formData.consigneeAddress.zipCode }}
                    </el-col>
                  </el-row>
                  <el-row :gutter="gutter">
                    <el-col :span="8">
                      交货日期:&nbsp;&nbsp;{{ formData.consigneeAddress.at }}
                    </el-col>
                    <el-col :span="8">
                      起始时间:&nbsp;&nbsp;{{ formData.consigneeAddress.startTime }}
                    </el-col>
                    <el-col :span="8">
                      结束时间:&nbsp;&nbsp;{{ formData.consigneeAddress.endTime }}
                    </el-col>
                  </el-row>
                  <el-row :gutter="gutter">
                    <el-col :span="24">
                      备注:&nbsp;&nbsp;{{ formData.consigneeAddress.remark }}
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item name="2" title="托信息">
        <el-card v-for="(item,index) in formData.cartons" :key="index" style="margin-top: 20px;" shadow="never">
          <div slot="header">
            <span>托{{ index + 1 }}</span>
          </div>
          <el-form label-position="top" size="small">
            <el-row :gutter="gutter">
              <el-col :span="20" style="border-radius: 8px;background-color: #f5f5f5;">
                <el-row type="flex" justify="space-between">
                  <el-col :span="4">
                    <el-form-item label="商品名称">
                      <p>{{ item.skuNameCn }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="货值">
                      <p>{{ item.unitPrice }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="NMFC">
                      <p>{{ item.nmfc }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="NMFC Sub">
                      <p>{{ item.nmfcSub }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="拖是否可堆叠">
                      <p>{{ item.stackableName }}</p>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="space-between">
                  <el-col :span="4">
                    <el-form-item label="托长(IN)">
                      <p>{{ item.length }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="托宽(IN)">
                      <p>{{ item.width }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="托高(IN)">
                      <p>{{ item.height }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="托重(LB)">
                      <p>{{ item.weight }}
                      </p></el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="密度">
                      <p>{{ item.freightClass }}</p>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="托数量">
                      <p>{{ item.sameSpecCartons }}
                      </p></el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="托类型">
                      <p>{{ item.typeName }}</p>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-collapse-item>
      <el-collapse-item name="3" title="订单费用">
        <el-table border :data="txs">
          <el-table-column prop="chargeType" label="费用科目" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column prop="currency" label="币种" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>
<script>
import request from '@/utils/request'
import { copyProperty } from '@/utils/tools'
export default {
  data() {
    return {
      gutter: 10,
      detailDialogVisible: false,
      txs: [],
      formDataDefault: {
        orderId: '',
        channelId: '',
        ref: '',
        shipperAddress: {
          contacter: '',
          phone: '',
          countryCode: 'US',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false',
          typeName: '',
          additionalServiceName: '',
          code: '',
          at: '',
          startTime: '',
          endTime: '',
          email: '',
          remark: ''
        },
        consigneeAddress: {
          contacter: '',
          phone: '',
          countryCode: 'US',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false',
          typeName: '',
          additionalServiceName: '',
          code: '',
          at: '',
          startTime: '',
          endTime: '',
          email: '',
          remark: ''
        },
        cartons: []
      },
      formData: {
        orderId: '',
        channelId: '0',
        customerRef: '',
        shipperAddress: {
          contacter: '',
          phone: '',
          countryCode: 'US',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false',
          typeName: '',
          additionalServiceName: '',
          code: '',
          at: '',
          startTime: '',
          endTime: '',
          email: '',
          remark: ''
        },
        consigneeAddress: {
          contacter: '',
          phone: '',
          countryCode: 'US',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false',
          typeName: '',
          additionalServiceName: '',
          code: '',
          at: '',
          startTime: '',
          endTime: '',
          email: '',
          remark: ''
        },
        cartons: []
      },
      detailExpandItemsDefault: ['1'],
      detailExpandItems: ['1']
    }
  },
  methods: {
    show(row) {
      this.detailExpandItems = []
      this.detailExpandItems = [...this.detailExpandItemsDefault]
      this.detailDialogVisible = true
      copyProperty(this.formData, this.formDataDefault)
      this.formData.orderId = row.orderId
      request({
        url: 'truck2/detail?orderId=' + row.orderId,
        method: 'get'
      }).then(res => {
        if (res.success) {
          copyProperty(this.formData, res.data)
          this.detail.channelName = row.channelName + ''
          this.detail.orgOwnerName = row.orgOwnerName
        }
      })
    },
    collapseChange(item) {
      item.forEach(ele => {
        switch (ele) {
           case '3':
            this.loadTxs(this.detailOrderId)
            break
        }
      })
    },
    loadTxs(orderId) {
      request({
        url: 'truck2/tx?orderId=' + this.formData.orderId,
        method: 'get'
      }).then(res => {
        if (res.success) {
          this.txs = res.data
        }
      })
    }
  }
}
</script>
<style>
.el-form--label-top .el-form-item__label {
    padding: 0 0 0px;
}
.el-card__header{
  padding: 10px 0px 10px 10px;
  background-color: #f5f5f5;
  font-weight: 700;
  font-size: 16px;
}
.el-card{
  border: 1px dashed #d8d8d8;
}
</style>
